<template>
    <u-popup :show="show" mode="bottom" @close="cancle">
        <view class="date-title">
            <text class="date-cancle" @click="cancle">取消</text>
            <text class="date-confirm" @click="confirm">确定</text>
        </view>
        <picker-view indicator-style="height: 50px;" style="width: 100%; height: 260px;" @change="changeHandler">
            <picker-view-column>
                <view class="date-column" v-for="(item, index) in years" :key="index">{{item}}年</view>
            </picker-view-column>
            <picker-view-column>
                <view class="date-column" v-for="(item, index) in months" :key="index">{{item}}月</view>
            </picker-view-column>
            <picker-view-column>
                <view class="date-column" v-for="(item, index) in days" :key="index">{{item}}日</view>
            </picker-view-column>
        </picker-view>
    </u-popup>
</template>

<script>
const years = []
const months = []
const days = []

for (let i = 1950; i <= 2021; i++) {
    years.push(i)
}

for (let i = 1; i <= 12; i++) {
    months.push(i)
}

for (let i = 1; i <= 31; i++) {
    days.push(i)
}
export default {
    name:"picker-date",
    props: {
        show:{
            type: Boolean
        },
    },
    data() {
        return {
            years,
            months,
            days,
            columnData: `${years[0]}-${months[0]}-${days[0]}`
        }
    },
    onLoad() {
    },
    methods: {
        addZero(value){
            return value < 10 ? `0${value}` : value;
        },
        getPickerDate(select){
            let year = this.addZero(this.years[0])
            let month = this.addZero(this.months[0])
            let day = this.addZero(this.days[0])
            if(Array.isArray(select) && select.length){
                year = this.addZero(this.years[select[0]])
                month = this.addZero(this.months[select[1]])
                day = this.addZero(this.days[select[2]])
            } 
            return `${year}-${month}-${day}`
        },
        changeHandler(event){
            const {value} = event.detail;
            this.columnData = this.getPickerDate(value);
            this.$emit('change', this.columnData);
        },
        cancle() {
            this.$emit('cancle');
        },
        confirm(){
            this.$emit('confirm', this.columnData);
        }
    }
    
}
</script>

<style scoped>
.date-column{
    line-height: 50px; 
    text-align: center;
}
.date-title{
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
}
.date-confirm{
    color: #07c160;
}
</style>